<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <title>${goods.goodsName}</title>
    <meta name="keywords" content="${goods.goodsName}" />
    <meta name="description" content="${goods.goodsName}" />

    <link rel="stylesheet" href="${base}/static/css/mui.css" />
    <link rel="stylesheet" href="${base}/static/css/font/iconfont.css" />
    <link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
    <style type="text/css">
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-family: "微软雅黑";

        }

        body {
            background: #f0f0f0;
        }

        .clear-fix:after {
            content: '.';
            display: block;
            clear: both;
            height: 0px;
            overflow: hidden;
            visibility: hidden;
        }

        .logo-box {
            padding:0 15px;
            background: #f5f5f5;
            text-align: center;
            border-bottom: 1px solid #cccccc;
        }

        .logo-box img {
            width: auto;
            max-width: 100%;
            height: 36px;
            margin: 1px auto;
            vertical-align: middle;
        }

        .logo-box span {
            color: #22add6;
            font-size: 15px;
        }

        .mui-slider-item img {
            max-height: 260px;
        }

        .goods-detail-info {
            min-width: 320px;
            max-width: 560px;
            background: #fff;
            padding: 8px;
        }

        .goods-detail-info h5 {
            color: #333;
            font-size: 16px;
            font-weight: normal;
            margin-top: 0px;
            margin-bottom: 0px;
            line-height: 28px;
            border-bottom: 1px solid #ccc;
        }

        .goods-detail-info div:nth-child(1) {
            color: #fff;
            font-size: 16px;
            min-height: 160px;
            width: 100%;
            overflow: hidden;
            margin: 15px auto 0 auto;
            text-align: center;
        }

        .goods-detail-info div:nth-child(1) img {
            display: block;
            width: 100%;
            min-height: 160px;
        }

        .switch-intro-detail{
            min-width: 320px;
            max-width: 560px;
            margin: 0 auto;
            background: #fff;
            border-bottom: 1px solid #eee;
            height: 65px;
            top: 40px;
        }

        .switch-btns-list{
            width: 80%;
            height: 40px;
            margin: 12px auto;
            text-align: center;
            border: 1px solid rgb(34,173,215);
            border-radius: 35px;
            z-index: 233;
        }

        .switch-btns-list div{
            width: 50%;
            float: left;
            padding: 0px 10px;
            text-align: center;
            color: rgb(34,173,215);
            height: 39px;
            font-size: 15px;
            line-height: 39px;
            overflow: hidden;
            cursor: pointer;

        }
        .switch-btns-list div:nth-child(1){
            border-bottom-left-radius: 35px;
            border-top-left-radius: 35px;
        }

        .switch-btns-list div:nth-child(2){
            border-bottom-right-radius: 35px;
            border-top-right-radius: 35px;
        }

        .over-button-style{
            background:rgb(34,173,215);
            color: #fff !important;
        }
        .goods-NP-label {
            position: relative;
            background: #fff;
            margin: 10px auto;
            padding: 8px;
        }

        .goods-NP-label h6 {
            margin-top: 0px;
            margin-bottom: 0px;
            line-height: 28px;
            text-align: left;
            font-size: 16px;
            font-weight: normal;
            color: #333;
        }

        .goods-cnt-label-box {
            display: block;
        }

        .goods-cnt-label-box span:nth-child(1) {
            float: left;
            color: #999;
            font-size: 13px;
            font-weight: normal;
            line-height: 28px;
        }
        .goods-cnt-label-box span:nth-child(2) {
            float: left;
            margin-left: 8px;
            color: #FF7B24;
            font-size: 18px;
            font-weight: bold;
            line-height: 28px;
        }
        .goods-cnt-label-box span:nth-child(3) {
            float: right;
            color: #999999;
            font-size: 15px;
            line-height: 28px;
        }

        .sale-progress-box {
            position: fixed;
            left: 0px;
            bottom: 0px;
            height: 125px;
            width: 100%;
        }

        .sale-progress-box img {
            display: block;
            width: 100%;
            height: 30px;
        }

        .cur-sale-num-list {
            position: absolute;
            top: 5px;
            left: 0px;
            line-height: 30px;
            font-size: 15px;
            color: #333333;
            width: 50%;
            text-align: center;
        }

        .cur-sale-num-list span {
            color: #ff7b24;
        }


        #dis-cut-down {
            position: absolute;
            top: 5px;
            right: 0px;
            line-height: 30px;
            font-size: 15px;
            color: #333333;
            width: 50%;
            text-align: center;
        }

        .stopke{
            max-width: 560px;
            min-width: 320px;
            margin: 0 auto;
            position: relative;
        }

        .process-box {
            max-width: 560px;
            min-width: 320px;
            padding: 18px 20px;
            margin: 0 auto;
            position: relative;
            background: #FFFFFF;
        }

        .process-box-panel {
            width: 100%;
            display: block;
            border-radius: 2px;
            height: 4px;
            background: #e6e6e6;
            background-size: 100% 100%;
            position: relative;
        }

        .left {
            width: 15px;
            height: 15px;
            border-radius: 15px;
            background: #ff9b24;
            position: absolute;
            left: 0px;
            top: -5px;
        }

        .right {
            width: 15px;
            height: 15px;
            border-radius: 15px;
            background: #e6e6e6;
            position: absolute;
            right: 0px;
            top: -5px;
        }

        #process-bar {
            background: #ff9b24;
            height: 4px;
            border-radius: 2px;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        #process-count {
            position: absolute;
            top: -13px;
            left: 0;
            width: 30px;
            height: 30px;
            border-radius: 30px;
            background: #ff6424;
            color: #fff;
            font-size: 11px;
            text-align: center;
            line-height: 30px;
            z-index: 20;
            margin-left: -8%;
        }

        .project-detail-nav{
            max-width: 560px;
            min-width: 320px;
            margin: 0 auto;
            height: 55px;
            background: #e6e6e6;
        }

        .go-back-shop{
            display: block;
            float: left;
            width: 30%;
            height: 100%;
            padding: 4px;
            position: relative;
        }

        .go-back-shop .shop-icon {
            font-size: 24px;
            position: absolute;
            margin: 5px 0 0 45px;
            color: #929292;
        }

        .go-back-shop .shop-span {
            position: absolute;
            margin: 30px 0 0 40px;
            opacity: 0.8;
            color: #929292;
            font-size: 12px;
        }

        .go-back-shop img {
            position: absolute;
            width: 20px;
            height: 35px;
            margin: 8px;
        }

        .buy-button{
            float: right;
            width: 70%;
            height: 100%;
            text-align: center;
            line-height: 55px;
            color: #fff;
            background: #ff7b24;
        }

        .mui-popup-button:nth-child(2) {
            font-size: 17px;
            line-height: 44px;
            position: relative;
            display: block;
            overflow: hidden;
            box-sizing: border-box;
            width: 100%;
            height: 44px;
            padding: 0 5px;
            cursor: pointer;
            text-align: center;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #ff7b24;
            background: rgba(255, 255, 255, .95);
            -webkit-box-flex: 1;
        }
        .mui-popup-button:nth-child(1) {
            font-size: 17px;
            line-height: 44px;
            position: relative;
            display: block;
            overflow: hidden;
            box-sizing: border-box;
            width: 100%;
            height: 44px;
            padding: 0 5px;
            cursor: pointer;
            text-align: center;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #999999;
            background: rgba(255, 255, 255, .95);
            -webkit-box-flex: 1;
        }
        .mui-popup-button.mui-popup-button-bold {
            font-weight: 200;
        }

        .mui-backdrop {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 998;
            background-color: rgba(0,0,0,.3);
        }

    </style>
</head>

<body>
    <div class="mui-content">
        <!--logo部分-->
        <div id="logoDiv" class="mui-row">
            <div class="mui-col-xs-12 logo-box clear-fix">
                <img src="${base}/static/img/logo_04.png"/><span>健维商城</span>
            </div>
        </div>
        <!--logo部分-->

        <!--基本信息 产品详情切换-->
        <div id="switchBtnDiv" class="mui-row mui-bar mui-bar-nav switch-intro-detail">
            <div class="mui-col-xs-12">
                <div id="switchBtns" class="switch-btns-list clear-fix">
                    <div class="over-button-style">基本信息</div>
                    <div>产品详情</div>
                </div>
            </div>
        </div>

        <!--基本信息 产品详情切换-->
        <!--占位置高度-->
        <div style="height: 65px;"></div>
        <!--占位置高度-->
        <!--基本信息内容-->

        <!--轮播图部分-->
        <div class="mui-row">

            <div id="slider" class="mui-slider">
                <div class="mui-slider-group mui-slider-loop">
                    <%
                        for (img in imgs) {
                    %>
                    <%  if(imgLP.first) {%>
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#" target="_blank">
                            <img src="${base}${imgs[imgs.~size-1].imgUrl}"/>
                        </a>
                    </div>
                    <%}%>
                    <div class="mui-slider-item">
                        <a href="#" target="_blank">
                            <img src="${base}${img.imgUrl}"/>
                        </a>
                    </div>
                    <%  if(imgLP.last) {%>
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#" target="_blank">
                            <img src="${base}${imgs[0].imgUrl}"/>
                        </a>
                    </div>
                    <%}%>
                    <%
                        }
                    %>
                </div>
                <div class="mui-slider-indicator">
                    <%
                        for (img in imgs) {
                    %>
                    <div class="mui-indicator ${imgLP.first?"mui-active"}"></div>
                    <% } %>
                </div>
            </div>
            <!--轮播图部分-->
            <!--某某产品名称/参数部分-->
            <div class="mui-row">
                <div class="mui-col-xs-12 goods-NP-label">
                    <h6>${goods.goodsName}</h6>
                    <div class="goods-cnt-label-box clear-fix">
                        <span><b style="font-size: 16px;">¥</b>${goods.price/100}</span>
                        <span>名额充足</span>
                    </div>
                </div>
            </div>
        </div>
        <!--基本信息内容-->
        <!--产品详情内容-->
        <div id="goodsDetailInfo" class="mui-row">
            <div class="mui-col-xs-12 goods-detail-info">
                <div class="goods-detail-info-content">
                    ${goods.detailInfo}
                </div>
            </div>
        </div>
        <!--产品详情内容-->

        <!--占位置高度-->
        <div style="height: 140px;"></div>
        <!--占位置高度-->

        <!--底部nav部分-->
        <div class="sale-progress-box">
            <div class="stopke">
                <img src="${base}/static/img/rr3png_04.png" />
                <div class="cur-sale-num-list">当前人数：<span>${goods.sales}</span></div>
                <!--倒计时-->
                <span id="dis-cut-down"></span>
            </div>
            <!--进度条-->
            <div class="process-box">
                <div class="process-box-panel">
                    <div class="left"></div>
                    <div class="right"></div>
                    <div id="process-count"></div>
                    <div id="process-bar"></div>
                </div>
            </div>
            <!--导航-->
            <div class="project-detail-nav clear-fix">
                <a href="javascript:history.go(-1);" class="go-back-shop">
                    <img src="${base}/static/img/86_03.png" />
                    <span class="mui-icon shop-icon"><i class="icons-font icon-shop"></i></span>
                    <span class="mui-tab-label shop-span">商城首页</span>
                </a>
                <div id="atpGroupBuy" class="buy-button">立即下单</div>
            </div>
        </div>
        <!--底部nav部分-->
    </div>
<div id="maskDiv" class="mui-backdrop" style="display:none;"></div>
<script type="text/javascript" src="${base}/static/js/jquery.min.js"></script>
<script src="${base}/static/js/mui.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
<script type="text/javascript" charset="utf-8">

    var num = ${goods.limitNum - goods.sales};
    var endTime = ${actEt};
    var intervalId;

    $(function () {
        mui.init();

        $.showLoading();
        <% if (imgs.~size>1) {%>
        var gallery = mui('.mui-slider');

        gallery.slider({
            interval: 3000
        });
        <% } %>
        if (num>0 && (endTime > new Date().getMilliseconds())) {
            $('#atpGroupBuy').bind('click', function () {
                var btnArray = ['取消', '确定'];
                mui.confirm('你将购买${goods.goodsName}<br/>' + '产品价格：￥${goods.price/100}元', '确认订单', btnArray, function(e) {
                    if(e.index == 1) {
                        //success
                        $('#maskDiv').show();
                        mui.toast('订单正在生成...',{ duration:200, type:'div' });

                        $.post('/front/goods/buildGoodsOrder.do',{goodsId:${goods.goodsId}}, function (result) {
                            if (result.ok && result.errCode=='0') {
                                var payUrl = '/wechat/prepareOrderPay.do?openId=${user.openId}&orderNo='+result.data+
                                    '&goodsId=${goods.goodsId}';
                                mui.toast('支付跳转中...',{ duration:1000, type:'div' });
                                setTimeout(function () {
                                    window.location.href = payUrl;
                                }, 1500);
                            } else {
                                var msg = '订单生成失败,请稍后再试!'
                                if (result.errCode == '201') {
                                    msg = '抱歉,每个人只能有参与一次的机会,别太贪心哟.'
                                } else if (result.errCode == '202') {
                                    msg = '哈哈,你来晚一步啦,商品已经售罄啦.';
                                }
                                mui.toast(msg,{ duration:2500, type:'div' });
                            }
                            setTimeout(function () {
                                $('#maskDiv').hide();
                            }, 2600)
                        }, 'json');

                    } else {
                        mui.toast('期待再次光临', { duration:2000, type:'div' });
                    }
                });
            });
        } else {
            $('#atpGroupBuy').text('活动已结束');
            $('#atpGroupBuy').css('color','#ff0000');
        }

        graphProcess(${goods.sales / goods.limitNum}, endTime);

        intervalId = setInterval(function () {
            disCountDown(endTime);
        }, 1000);



        $('#switchBtns').children().each(function (r, w) {
            var overBtnStyle = 'over-button-style';
            $(this).bind('click', function () {
                $(this).addClass('over-button-style').siblings('.'+overBtnStyle).removeClass(overBtnStyle);
                if (r==0) {
                    $(window).scrollTop(0);
                } else {
                    var top = $('#goodsDetailInfo').position().top - 60;
                    $(window).scrollTop(top);
                }
            });
        });

        $(window).on('scroll', function() {
            var winScroll = $(this).scrollTop();
            if (winScroll > 5) {
                $('#switchBtnDiv').css('top', 0);
            } else {
                $('#switchBtnDiv').css('top', 40);
            }
        });

        setTimeout(function () {
            $.hideLoading();
        }, 800);
    });

    function disCountDown(timestamp) {

        var now = new Date();
        var end = new Date(timestamp);

        if (end > now && num > 0) {
            var leftSec = parseInt((end.getTime() - now.getTime()) / 1000);
            var day = Math.floor(leftSec / (60 * 60 * 24));
            var hour = Math.floor((leftSec - day * 24 * 60 * 60)/ 3600);
            var min = Math.floor((leftSec - day * 24 * 60 * 60 - hour * 60 * 60) / 60);
            var sec = Math.floor(leftSec - day * 24 * 60 * 60 - hour * 60 * 60 - min * 60);

            var html = day+'天'+(hour<10 ? '0'+hour : hour)
                +'时'+(min<10 ? '0'+min : min)
                +'分'+(sec<10 ? '0'+sec : sec)+'秒';
            $('#dis-cut-down').html(html);
        } else {
            $('#dis-cut-down').html('<span style="color:#ff0000">已结束</span>');
            clearInterval(intervalId);
            $('#atpGroupBuy').text('活动已结束');
            $('#atpGroupBuy').css('color','#ff0000');
            $('#atpGroupBuy').unbind('click');

        }
    }

    function graphProcess(percent, timestamp) {
        var now = new Date().getMilliseconds();
        if (now > timestamp || num == 0) {
            percent = '100';
        }

        $('#process-bar').css('width', percent+'%');
        $('#process-count').css('left', $('#process-bar').width()+10);
        $('#process-count').text(percent+'%');
    }
</script>
</body>

</html>
